import { Component, PropsWithChildren } from 'react'
import { View, Text, Input, Button } from '@tarojs/components'
import { AtTabs, AtTabsPane, AtIcon } from 'taro-ui'
import './index.scss'
import Taro from '@tarojs/taro'

export default class Index extends Component<PropsWithChildren> {
  state: any
  constructor(props) {
    super(props)
    this.state = {
      current: 0
    }
  }
  componentWillMount() { }

  componentDidMount() { }

  componentWillUnmount() { }

  componentDidShow() { }

  componentDidHide() { }
  goBuyHouse() {
    Taro.navigateTo({
      url: '/pages/BuyHouse/index'
    })
  }
  goSearchHouse() {
    Taro.navigateTo({
      url: '/pages/SearchHouse/index'
    })
  }
  goBroker() {
    Taro.navigateTo({
      url: '/pages/Broker/index'
    })
  }
  goMarket() {
    Taro.navigateTo({
      url: '/pages/Market/index'
    })
  }
  handleClick(index: number) {
    this.setState({
      current: index
    })
  }
  render() {
    const tabList = [{ title: '求租' }, { title: '求购' }]
    return (
      <View className='home'>
        <View className='nav-bar-box'>
          <View className='status-bar'></View>
          <View className='title-bar'>
            <Text className='tit'>找房</Text>
          </View>
        </View>
        <View className='homebox'>
          <AtTabs current={this.state.current} tabList={tabList} onClick={this.handleClick.bind(this)}>
            <AtTabsPane current={this.state.current} index={0} >
              <View className='content'>
                <View className='input'>
                  <AtIcon className='AtIcon' value='map-pin' size='25' color='#F00'></AtIcon>
                  <Input placeholder='请输入意向城市、区域、意向楼盘' />
                </View>
                <View className='input1'>
                  <Input placeholder='请输入姓名' />
                  <Input placeholder='请输入手机号' />
                </View>
                <View className='input2'>
                  <Input placeholder='请输入意向价格' />
                  <Text>元</Text>
                </View>
                <View>
                  <AtIcon value='eye' size='20' color='#ccc'></AtIcon>
                  <Text style={{ color: "#999" }}>隐私保护已开启</Text>
                </View>
                <View className='btns'>
                  <Button className='btn1'>发布需求</Button>
                  <Button className='btn2'>当前有148位置业顾问为您服务</Button>
                </View>
              </View>
            </AtTabsPane>
            <AtTabsPane current={this.state.current} index={1}>
              <View className='content1'>
                <View className='input'>
                  <AtIcon className='AtIcon' value='map-pin' size='25' color='#F00'></AtIcon>
                  <Input placeholder='请输入意向城市、区域、意向楼盘' />
                </View>
                <View className='input1'>
                  <Input placeholder='请输入姓名' />
                  <Input placeholder='请输入手机号' />
                </View>
                <View className='input2'>
                  <Input placeholder='请输入意向价格' />
                  <Text>元</Text>
                </View>
                <View>
                  <AtIcon value='eye' size='20' color='#ccc'></AtIcon>
                  <Text style={{ color: "#999" }}>隐私保护已开启</Text>
                </View>
                <View className='btns'>
                  <Button className='btn1'>发布需求</Button>
                  <Button className='btn2'>当前有148位置业顾问为您服务</Button>
                </View>
              </View>
              {/* <View className='content'>
                <View className='input'>
                  <AtIcon className='AtIcon' value='map-pin' size='25' color='#F00'></AtIcon>
                  <Input placeholder='请输入意向城市、区域、意向楼盘' />
                </View>
                <View className='input1'>
                  <Input placeholder='请输入姓名' />
                  <Input placeholder='请输入手机号' />
                </View>
                <View className='input2'>
                  <Input placeholder='请输入意向价格' />
                  <Text>元</Text>
                </View>
                <View>
                  <AtIcon value='eye' size='20' color='#ccc'></AtIcon>
                  <Text style={{ color: "#999" }}>隐私保护已开启</Text>
                </View>
                <View className='btns'>
                  <Button className='btn1'>发布需求</Button>
                  <Button className='btn2'>当前有148位置业顾问为您服务</Button>
                </View>
              </View> */}
            </AtTabsPane>
          </AtTabs>
        </View>
        <View className='tags'>
          <View className='taglist' onClick={this.goBuyHouse.bind(this)}>
            <View>
              <View className='tit'>新房</View>
              <View style={{ color: '#f05' }}>热门新楼盘</View>
            </View>
            <AtIcon value='bookmark' size='36' color='#f05'></AtIcon>
          </View>
          <View className='taglist' style={{ background: '#f1f5f6' }} onClick={this.goSearchHouse.bind(this)}>
            <View>
              <View className='tit'>地图找房</View>
              <View style={{ color: '#0ff' }}>查看附近好房源</View>
            </View>
            <AtIcon value='map-pin' size='36' color='#0ff'></AtIcon>
          </View>
        </View>
        <View className='tags1'>
          <View className='taglist' style={{ background: '#ecf4f6' }} onClick={this.goBroker.bind(this)}>
            <View>
              <View className='tit'>经纪人</View>
              <View style={{ color: '#0f0' }}>优选置业顾问</View>
            </View>
            <AtIcon value='user' size='36' color='#0f0'></AtIcon>
          </View>
          <View className='taglist' style={{ background: '#faf6f5' }} onClick={this.goMarket.bind(this)}>
            <View>
              <View className='tit'>楼市圈</View>
              <View style={{ color: '#f95' }}>楼市最新动态</View>
            </View>
            <AtIcon value='message' size='36' color='#f95'></AtIcon>
          </View>
        </View>
      </View>
    )
  }
}
